<template>
  <!-- v-if="tmCascaderShowIndex==_level" -->
  <view>
    <scroll-view v-if="tmCascaderShowIndex == props.level" :style="[{ height: `${props.height}rpx` }]" scroll-y>
      <view v-for="(item, index) in _value" :key="index">
        <nodeCellVue
          :follow-theme="props.followTheme"
          :level="props.level"
          :data="item"
          :key-index="index"
          @click="onCellClick(item)"
        ></nodeCellVue>
      </view>
    </scroll-view>
    <BaseCascader
      v-if="nextChildData.length > 0"
      :follow-theme="props.followTheme"
      :level="_level"
      :height="props.height"
      :color="props.color"
      :data="nextChildData"
      @cellClick="onCellClick"
    ></BaseCascader>
  </view>
</template>
<script lang="ts" setup>
import { computed, ref, Ref, watch, getCurrentInstance, inject, toRaw, watchEffect, PropType } from 'vue'
import BaseCascader from './base-cascader.vue'
import BaseNode from './base-node.vue'
import nodeCellVue from './node-cell.vue'
import { childrenData } from './interface'
const emits = defineEmits(['cellClick'])
const props = defineProps({
  followTheme: {
    type: [Boolean, String],
    default: true,
  },
  /**
   * 导入的数据
   */
  data: {
    type: Array as PropType<Array<childrenData>>,
    default: () => [],
    required: true,
  },
  height: {
    type: Number,
    default: 0,
    required: true,
  },
  color: {
    type: String,
    default: 'primary',
  },
  level: {
    type: Number,
    default: 0,
  },
  //点击列表中项目时再自动切换到下一项时之前执行的勾子函数，方便动态加载数据。
  beforeCellClick: {
    type: [Function, Boolean],
    default: () => {
      return false
    },
  },
})
const _value = computed(() => props.data)
const _level = props.level + 1
const tmCascaderShowIndex = inject(
  'tmCascaderShowIndex',
  computed(() => 0)
)
const ParentActivedLs = inject(
  'tmCascaderValue',
  computed(() => [])
)
const nextChildData = ref([])
watchEffect(async () => {
  if (ParentActivedLs.value[props.level]) {
    let nowobj = _value.value.filter((el) => el.id == ParentActivedLs.value[props.level])
    if (nowobj.length > 0) {
      if (
        typeof nowobj[0]?.children == 'object' &&
        Array.isArray(nowobj[0]?.children) &&
        nowobj[0]?.children?.length > 0 &&
        nowobj[0]?.children.length >= 0
      ) {
        nextChildData.value = nowobj[0]?.children
      }
    }
  }
})

function onCellClick(item: any) {
  emits('cellClick', item)
}
</script>
